import React, { Component } from "react";
import axios from "axios";
import "./VideoDetail.css";
import qs from 'qs'; // 作用: 可以解析 URL 的查询字符串转为 对象

export default class VideoDetail extends Component {
    state = {
        //声明状态 保存视频数据
        info: {},
    };

    render() {
        //结构赋值
        let {desc, video_local} = this.state.info;
        return (
            <div className="container">
                <button className="btn btn-danger" onClick={this.back}>返回</button>

                <hr />
                <h3>{desc}</h3>
                <hr />
                <div className="video-container">
                    <video
                        height="100%"
                        controls
                        src={video_local ? ("http://cdn.xiaohigh.com" + video_local) : ''}
                    ></video>
                </div>
            </div>
        );
    }

    back = () => {
        //运行代码
        // console.log(this.props);
        // this.props.history.goBack();
        //回退一个历史
        this.props.history.go(-1);// BOM  history.go(-1)
    }

    async componentDidMount() {
        //获取页面 URL 的参数
        // console.log(this.props);
        //1-1 params 提取参数
        let id = this.props.location.pathname.split('/').pop();
        //1-2 params 参数的简便获取   match 匹配
        // let id = this.props.match.params.id;

        //2. query参数获取
        // console.log(this.props);
        // let search = this.props.location.search.slice(1); // ?id=1  => {'?id' : 1}
        // let res = qs.parse(search);// {id: 1}
        // let id = res.id;

        //3. state 参数获取
        // console.log(this.props);
        // let id = this.props.location.state.id;

        //发送请求获取单个的视频信息
        let result = await axios.get("http://api.xiaohigh.com/douyin/" + id);
        //查看结果
        // console.log(result);
        //保存状态
        this.setState({
            info: result.data
        })
    }
}
